<style>
.el-header {
  background-color: #2c2c2c;
  border-bottom: 1px solid #1a1a1a;
  color: #333;
  text-align: center;
  line-height: 60px;
}
/*logo*/
.main-logo {
  width: 188px;
  border-right: 1px solid #1a1a1a;
}

.main-logo img {
  height: 50px;
  margin: 2px 0;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-menu {
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.main-container {
  height: 100%;
}
</style>

<template>
    <el-container class="main-container">
        <el-header>
            <div class="main-logo">
                <img src="../assets/boniao-logo.png"  alt="boniao-logo" />
            </div>
        </el-header>
        <el-container>
            <el-aside width="210px">
            <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#3D464D"
            text-color="#fff"
            active-text-color="#6ED31F"
            unique-opened="true">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-share"></i>
                        <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航二</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                    Main
                </el-main>
                <el-footer>
                    Footer
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}

</script>
